<template>
  <a-dropdown>
    <div class="MainUser">
      <img :src="imgUrl"/>
      <div class="MainUser-name">{{user.fullName}}</div>
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item key="1" @click="confirm"><logout-outlined class="logout" /><span style="margin-left: 10px"> {{i18n('list.logOut','退出登录')}}</span></a-menu-item>
      </a-menu>
    </template>

  </a-dropdown>
</template>

<script>
import {mapActions,mapState} from 'pinia';
import LoginApi from "@/api/login"
import {Util,TokenUtil} from "@lowcode/jpaas-base-lib"
import useMain from "../stores/use-main";

export default {
  name: "MainUser",
  data(){
    return {
      imgUrl:  new URL('@img/portrait.png', import.meta.url).href,
    }
  },
  computed:{
    ...mapState(useMain,['user',"token"])
  },
  created() {
    this.getFilePath(this.user.photo)
  },
  methods: {
    ...mapActions(useMain, ['setUser']),
    i18n(name,text,key){
      return this.$ti18(name,text,"screenLang",key);
    },
    confirm(){
      let self=this;
      this.$confirm({
        title: this.$ti18('rxMsa.actionTips','操作提示'),
        content: this.i18n('common.wantToLogOut','真的要注销登录吗？'),
        okText:this.$ti18('rxForm.ackBtn','确认'),
        cancelText: this.$ti18('rxForm.cancelBtn','取消'),
        onOk: () => {
          self.logout();
        },
        onCancel() {
        },
      })
    },
    logout(){
      LoginApi.logout(this.token).then(res=>{
        //清空token
          console.log(res)
        TokenUtil.removeToken();
        setTimeout(() => {
          let href = window.location.href ;
          let mainUrl= import.meta.env.JPAAS_MAIN_URL;
          if(!href.includes(mainUrl)){
            window.location.href =  `${mainUrl}?redirect=${href}`
          }
        }, 16)
      });
    },
    getFilePath(fileId) {
      if (fileId && fileId != '') {
        let token = TokenUtil.getToken();
        fileId=Util.encryptWord(fileId);
        this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId=' + fileId + '&accessToken=' + token
      }
    },
  },
}
</script>

<style scoped lang="less">
.MainUser{
  float: right;
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 32px;
  margin-top: 15px;
  img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .MainUser-name{
    color: white;
    font-size: 14px;
    margin-right: 24px;
    margin-left: 10px;
  }
}
</style>
